<template>
    <div>
        <navtop title="我的收藏" :fixed="true" />
    </div>
    <div class="my-box">
        <div class="my-bg">
        </div>
        <div class="product-box">
            <div class="pro-item" v-for="(item, index) in productData" :key="index">
                <!-- @click="viewProductDetail(item.pid)" -->

                <Product :pro="item" :is-remove="true" />
                <!-- @remove="removeProduct(item.pid, index)" -->
            </div>
        </div>
        <van-empty v-show="productData.length === 0" description="没有收藏数据！" />
    </div>
</template>
<script setup lang="ts">
import navtop from "@/components/navtop.vue";
import Product from "@/components/Product.vue"
import { Toast } from 'vant'

import { getfindAllLike } from '@/api/index';
let productData: any = ref<Array<any>>([]);

onMounted(() => {
    getfindAllLike().then((result: any): void => {


        if (result.data.code === 700) {
            Toast(result.data.msg);
            // router.push({ name: 'Login' });
            return;
        }

        if (result.data.code === 2000) {
            productData.value = result.data.result;
        }


    })
})

</script>
<style lang="less" scoped>
.my-box {
    width: 100vw;

    .my-bg {
        width: 100vw;
        height: 160px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #0c34ba;
        position: relative;
        z-index: -12;
    }

    .product-box {
        width: 94vw;
        border-radius: 12px;
        margin: -30px 10px 0;

        display: flex;
        background-color: #fff;
        padding: 10px;
        flex-wrap: wrap;
    }

    .pro-item {
        width: calc(~"50% - 5px");
        margin-bottom: 10px;
        margin-right: 10px;
        border-radius: 12px;
        overflow: hidden;

        &:nth-child(2n) {
            margin-right: 0;
        }
    }


    // .bg-cover {}
}
</style>